<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
            过滤器:
                格式化数据,比如将字符串格式化为首字母大写,
            自定义过滤器(全局)
            Vue.filter('过滤器名称',function(value){
                // 过滤器业务逻辑
            })
            过滤器的使用 (插值表达式,属性绑定)
                <div>{{msg| upper}}</div>
                <div>{{msg| upper | lower}}</div>
                <div v-bind:id="id | formatId">{{msg| upper}}</div>
            局部过滤器:
                filters:{
                    '过滤器名称':function(value){
                        // 过滤器业务逻辑
                    }
                }
        -->
        <input type="text" v-model="msg">
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        <div :abc='msg | upper'>测试数据</div>
    </div>

    <script lang="text/javascript">
        // Vue.filter('upper',function(val){
        //     return val.charAt(0).toUpperCase() + val.slice(1);
        // })
        Vue.filter('lower',function(val){
            return val.toLowerCase() ;
        })
        var vm = new Vue({
            el: "#app",
            data: {
                msg:''
            },
            filters:{
                'upper':function(val){
                    // 过滤器业务逻辑
                    return val.charAt(0).toUpperCase() + val.slice(1);
                }
            }
            
        })
    </script>

</body>

</html>